{% extends "index.html" %}

{% block content %}

	
		<div class="row">
		<div class="col-xs-12">
											
										
			<h3 class="header smaller lighter blue">
				<i class="icon-hand-right icon-animated-hand-pointer blue"></i>
				用户组管理
			</h3>
			<div class="col-sm-3">
										<div class="widget-box">
											<div class="widget-header widget-header-flat">
												<h4>Tips</h4>
											</div>

											<div class="widget-body">
												<div class="widget-main">
													<ul class="list-unstyled spaced2">
														<li>
															<i class="icon-circle green"></i>
															该功能创建用户组对用户组分配权限
														</li>
																			
							
															<li class="muted">
																<i class="icon-warning-sign orange"></i>
																权限分配注意事项：
																								
															</li>
						
															<li>
																<ul class="list-unstyled">
																	<li>
																		<i class="icon-caret-right blue"></i>
																		如果用户权限与用户组权限可以同时分配
																	</li>
						
																	<li>
																		<i class="icon-caret-right blue"></i>
																		如果用户属于用户组则会继承用户组的权限
																	</li>
																	<li>
																		<i class="icon-caret-right blue"></i>
																		如果用户可以单独分配权限
																	</li>
																	<li>
																		<i class="icon-caret-right blue"></i>
																		已勾选项表示已有权限
																	</li>
																</ul>
															</li>																							
													</ul>													
												</div>
											</div>
										</div>
									</div>
									
									
					<div class="col-sm-6">
											
									
										<div class="tabbable">
											<ul class="nav nav-tabs padding-12 tab-color-blue background-blue" id="myTab4">
												<li class="active">
													<a data-toggle="tab" href="#profile4">用户组列表</a>
												</li>											
												


											</ul>

											<div class="tab-content">
												

												
												<div id="profile4" class="tab-pane in active">
													<div class="widget-toolbox padding-8 clearfix">
		
														<button class="btn btn-xs btn-success pull-left" class="btn btn-primary btn-lg" data-toggle="modal"  data-target="#addGroupModal">
															<i class="icon-arrow-right icon-plus"></i>
															<span class="bigger-110">添加用户组</span>
														</button>
													</div>												
													<div>
														<table class="table table-striped table-bordered">
															<thead>
																<tr>
																	<th class="center">序号</th>
																	<th class="center">名称</th>													
																	<th class="center">操作</th>
																</tr>
															</thead>
										
															<tbody>
																{% for ds in groupList %}
																<tr>
																	<td class="center">{{ ds.id }}</td>
																	<td class="center">
																		<a>{{ ds.name }}</a>
																	</td>
																		
																	<td class="center">
																		<button class="btn btn-xs btn-success" data-toggle="modal"  data-target="#groupPermModel-{{ds.id}}">
																			<i class="icon-edit  bigger-110 icon-only"></i>
																		</button>
																		<button class="btn btn-xs btn-danger" onclick="deleteGroup(this,{{ds.id}},'{{ds.name}}','delete')">
																			<i class="icon-trash  bigger-110 icon-only"></i>
																		</button>											
																	</td>
																</tr>
																{% endfor %}
															</tbody>
														</table>
													</div>													
													<div class="hr "></div>
										
													<div class="row">
														<div class="col-sm-5 pull-right">
															<h4 class="pull-right">
																Total Groups :
																<span class="red">{{ groupList|length }}</span>
															</h4>
														</div>
														<div class="col-sm-7 pull-left"> 汇总信息 </div>
													</div>													
												</div>

											</div>
										</div>
									</div>				
			
		</div>
		
		{% for ds in groupList %}
			<!-- 模态框（Modal） -->
			<div class="modal fade" id="groupPermModel-{{ds.id}}" tabindex="-1" role="dialog" aria-labelledby="groupPermModelLabel" aria-hidden="true">
				<div class="modal-dialog" style="width:800px;">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								&times;
							</button>
							<h4 class="modal-title" id="groupPermModelLabel">
								权限分配
							</h4>
						</div>
						<div class="modal-body">
							<form class="form-horizontal" role="form" id="modfilyGroup-{{ds.id}}">
																
							
								<div class="space-4"></div>
							
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-input-readonly">
									<i class=" icon-group bigger-110 blue"></i>
									<strong> 用户组名</strong> </label>
							
									<div class="col-sm-9">
										<input class="input-sm" type="text" value="{{ds.name}}" placeholder="用户名" name="name" />											
										<div class="space-2"></div>
										<div class="help-block" id="input-size-slider-3"></div>										
									</div>
								</div>
																	
																
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-4">
									<i class="icon-ban-circle bigger-110 blue"></i>
									<strong>分配权限</strong></label>
							
									<div class="col-sm-9">
										<select id="permtype{{ds.id}}"  multiple class="selectpicker" data-live-search="true"  data-live-search="false">	
												{% for perm in permList %}
													{% if perm.id in ds.perm_id %}
														<option selected="selected" value="{{perm.id}}">{{perm.name}}</option>
														{% else %}
														<option value="{{perm.id}}">{{perm.name}}</option>
													{% endif %}	
												{% endfor %}
										</select>	
																																						
									</div>
								</div>		
																																																	
							</form>	
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭
							</button>
							<button type="button" class="btn btn-primary" onclick="onBtnHandleGroup(this,{{ds.id}},'modify')">
								确认
							</button>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal -->
			</div>
			
		{% endfor %}
		
		
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="addGroupModal" tabindex="-1" role="dialog" aria-labelledby="addGroupModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="addGroupModalLabel">
							添加用户组
						</h4>
					</div>
					<div class="modal-body">
						
						<form class="form-horizontal" id="addGroup">
														
								<div class="form-group">
										<label class="col-sm-3 control-label no-padding-right" for="form-input-readonly">
										<i class=" icon-group bigger-110 blue"></i>
										<strong> 用户名</strong> </label>					
											<div class="col-sm-9">
											<input class="input-sm" type="text" id="form-field-6" placeholder="" name="name" />																				
										</div>
								</div>
							
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-4">
									<i class="icon-ban-circle bigger-110 blue"></i>
									<strong>分配权限</strong></label>
							
									<div class="col-sm-9">
										<select id="addGroupPerm"  multiple class="selectpicker" data-live-search="true"  data-live-search="false">	
												{% for perm in permList %}
													<option value="{{perm.id}}">{{perm.name}}</option>
												{% endfor %}
										</select>	
																																						
									</div>
								</div>								
																		
						</form>	
						
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭
						</button>
						<button type="button" class="btn btn-primary" onclick="addGroup(this,'add')">
							添加
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
		
		
	</div>
									
									



		<script type="text/javascript">
			if("ontouchend" in document) document.write("<script src='/static/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>


		<!-- page specific plugin scripts -->

		<script src="/static/js/jquery.dataTables.min.js"></script>
		<script src="/static/js/jquery.dataTables.bootstrap.js"></script>

		<script type="text/javascript">
			
		
			jQuery(function($) {
				var oTable1 = $('#sample-table-2').dataTable( {
				"aoColumns": [
			      { "bSortable": false },
			      null, null,null, null, null,
				  { "bSortable": false }
				] } );
				
				
				
				$('table th input:checkbox').on('click' , function(){
					var that = this;
					$(this).closest('table').find('tr > td:first-child input:checkbox')
					.each(function(){
						this.checked = that.checked;
						$(this).closest('tr').toggleClass('selected');
					});
						
				});
			
			
				$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
				function tooltip_placement(context, source) {
					var $source = $(source);
					var $parent = $source.closest('table')
					var off1 = $parent.offset();
					var w1 = $parent.width();
			
					var off2 = $source.offset();
					var w2 = $source.width();
			
					if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
					return 'left';
				}
			})
			
			function addGroup(obj,op) {	
				var btnObj = $(obj);
				btnObj.attr('disabled',true);
					var server_data = {};
					var required = ['name']; /* 必填项列表 */
					var form = document.getElementById('addGroup');
					for (var i = 0; i < form.length; ++i) {
						var name = form[i].name;
						var value = form[i].value;	
						idx = $.inArray(name, required);						
						if (idx >= 0 && value.length == 0){
							window.wxc.xcConfirm("请注意必填项不能为空~", window.wxc.xcConfirm.typeEnum.error);
							btnObj.removeAttr('disabled');
							return false;
						};	
						if (  value.length != 0 && name.length != 0 ){
							server_data[name] = value;
						};					
					};				
					server_data['op'] = op;
					var permList = '';    
					 $("#addGroupPerm :selected").each(function(){
						 permList += $(this).val() +  ','    
					 });	
					if (permList.length > 0){
						server_data.perm = permList.substring(0,permList.length-1);
					};
					$.ajax({
						dataType: "JSON",
						url:'/group/', //请求地址
						type:"POST",  //提交类似
						data:server_data,  //提交参数
						success:function(response){
							btnObj.removeAttr('disabled');
							if (response["code"] == 200){
								window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.success);
							}
							else {
								window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
							}
							
						},
				    	error:function(response){
				    		btnObj.removeAttr('disabled');
				    		window.wxc.xcConfirm(response["data"], window.wxc.xcConfirm.typeEnum.error);
				    	}
					});	
				}
			
			
			function deleteGroup(obj, id,group,op){
				var btnObj = $(obj);
				if ( op == 'delete'){
					var txt=  "是否确认删除用户组？"
				};				
				var option = {
						title: "操作用户组("+group+")",
						btn: parseInt("0011",2),
						onOk: function(){
							$.ajax({
								  type: 'POST',
								  url: '/group/',
								  data:{
										"id":id,
										"op":op,
										"name":group,
									},
							      success:function(response){			            
						                if (response["code"]=="200"){ 
						                	window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.success);
	
						                }
							        	else{
							        		window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
							        	}						                
								},
					            error:function(response){
					            	window.wxc.xcConfirm("操作失败", window.wxc.xcConfirm.typeEnum.error);
					            },		
								});
						},
						onCancel:function(){	
						},
						onClose:function(){
						}
					}			
				window.wxc.xcConfirm(txt, "custom", option);
		}
			
			function onBtnHandleGroup(obj, id,op){
				var btnObj = $(obj);
				btnObj.attr('disabled',true);
				var required = ['name'];
				var server_data = {};
				var form = document.getElementById('modfilyGroup-'+id);
				for (var i = 0; i < form.length; ++i) {
					var name = form[i].name;
					var value = form[i].value;	
					idx = $.inArray(name, required);	
					if (idx >= 0 && value.length == 0){
						btnObj.removeAttr('disabled');
						window.wxc.xcConfirm("请注意必填项不能为空~", window.wxc.xcConfirm.typeEnum.error);
						return false;
					}
					else if(  value.length != 0 && name.length != 0 ){
						server_data[name] = value;
					};				
				};			
				server_data['op'] = op;
				server_data['id'] = id;
				var permList = '';    
				 $("#permtype"+ id +" :selected").each(function(){
					 permList += $(this).val() +  ','    
				 });	
				if (permList.length > 0){
					server_data.perm = permList.substring(0,permList.length-1);
				};
				$.ajax({
					dataType: "JSON",
					url:'/group/', //请求地址
					type:"POST",  //提交类似
					data:server_data,  //提交参数
					success:function(response){
						btnObj.removeAttr('disabled');
						if (response["code"] == 200){
							window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.success);
						}
						else {
							window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
						}
						
					},
			    	error:function(response){
			    		btnObj.removeAttr('disabled');
			    		window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
			    	}
				})
		}

</script>
{% endblock %}
